<template>
    <Tabs type="card">
        <TabPane label="水表抄表">
            <Card class="no-border-card">			
                <!--标题-->
                <p slot="title">
                    水表抄表
                    <Button type="primary" class="btn-in-top-large" @click="exportTable" v-pmis="36">导出报表</Button>			
                </p>			
                <!--标题end-->
                
                <!--搜索条件-->
                <Row :gutter="16" style="margin-bottom:15px">
                    <Col span="11">
                        <Select clearable v-model="region_code" filterable>
                            <Option v-for="item in list1" :value="item.region_code" :key="item.region_code">{{ item.name }}</Option>
                        </Select>
                    </Col>

                    <Col span="11">               
                        <Select v-model="branch" filterable clearable placeholder="选择门店">
                            <Option v-for="item in list2" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </Col>

                    <Col span="2">
                        <Button type="primary" icon="ios-search-strong" style="padding:4px 0px 3px;" @click="getData(1)"></Button>			
                        <!--搜索条件end-->			
                    </Col>
                </Row>				
                <!--搜索条件end-->			

                <!--水表抄表数据-->
                <Table stripe border :columns="columns" :data="datas" size="small" :loading="isLoadig"></Table>
                <!--水表抄表数据end-->


                <!--分页-->
                <Page 
                :total="total" 
                :page-size="size"
                :current.sync="currentPage"
                @on-change="getData" 
                show-elevator 
                show-total 
                style="text-align:center"></Page>
                <!--分页end-->
            </Card>	
        </TabPane>
    </Tabs>
</template>	

<script>
// import util from '@/libs/util';
import { http, api } from '@/libs/http'
import dataCenter from '@/libs/dataCenter'
export default {
  name: 'abnormal_report',
  data () {
    return {
      exportWatermeter: api.report_watermeter_export.path,
      isLoadig: true,
      size: 20,
      total: 0,
      currentPage: 1,
      columns: [
        // 水表抄表表头
        // {
        //     align: 'center',
        //     title: '序号',
        //     key: 'id',
        //     minWidth: 90
        // },
        {
          align: 'center',
          title: '时间',
          // key: 'time',
          minWidth: 150,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              new Date(obj.row.time).Format('yyyy-MM-dd HH:mm')
            )
          }
        },
        {
          align: 'center',
          title: '房源编号',
          key: 'home_name',
          minWidth: 90
        },
        {
          align: 'center',
          title: '房源类型',
          minWidth: 90,
          render (createElement, obj) {
            let typeMap = ['', '分散式', '集中式', '集散式']
            return createElement(
              'span', // 标签名称
              typeMap[obj.row.home_type]
            )
          }
        },
        {
          align: 'center',
          title: '城市地区',
          key: 'city',
          minWidth: 90
        },
        {
          align: 'center',
          title: '房源小区',
          key: 'block',
          minWidth: 90
        },
        {
          align: 'center',
          title: '房源地址',
          minWidth: 220,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              '' + obj.row.address
            )
          }
        },
        {
          align: 'center',
          title: '房间号',
          key: 'room_name',
          minWidth: 90
        },
        {
          align: 'center',
          title: '租客',
          key: 'tenan_namet',
          minWidth: 90
        },
        {
          align: 'center',
          title: '冷水表读数',
          key: 'cold_water',
          minWidth: 90,
          render (createElement, obj) {
            let result = Number(obj.row.cold_water).toFixed(2)
            if (result === '-1.00') result = '-'
            return createElement(
              'span', // 标签名称
              result
            )
          }
        },
        {
          align: 'center',
          title: '热水表读数',
          key: 'hot_water',
          minWidth: 90,
          render (createElement, obj) {
            let result = Number(obj.row.hot_water).toFixed(2)
            if (result === '-1.00') result = '-'
            return createElement(
              'span', // 标签名称
              result
            )
          }
        }
      ],
      datas: [
        // 水表抄表具体数据
      ],
      region_code: 0,
      branch: null,
      status: '0',
      list1: [
        {
          region_code: 0,
          name: '全部地区'
        }
      ],
      list2: []
    }
  },
  created () {
    this.getData(1)
    this.getRegion() // 获取地区
    this.getBranches() // 获取门店
  },
  methods: {
    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      let params = {
        region_code: this.region_code,
        limit: this.size,
        branch_id: this.branch || null,
        offset: this.size * (page - 1)
      }
      if (this.branch === 0) {
        params.branch_id = 0
      }

      http.request(this, api.report_watermeter, null, params, res => {
        if (res && res.list) {
          this.datas = res.list
          this.total = res.count || 0
        }
        this.isLoadig = false
      })
    },
    getRegion () {
      dataCenter.getCities(this, null, res => {
        // util.log('getCities', dataCenter.cities);
        if (res) {
          this.list1 = res
        }
      })
    },
    getBranches () {
      dataCenter.getStores(this, res => {
        if (res) {
          this.list2 = this.list2.concat(res)
        }
      })
    },
    exportTable () {
      let params = {
        region_code: this.region_code,
        branch_id: this.branch || null
      }
      if (this.branch === 0) {
        params.branch_id = 0
      }
      // 导出报表
      http.exportTable(this, api.report_watermeter_export, null, params)
    }
  }
}
</script>

<style lang="less">
.export-link {
    color: #fff;
    text-decoration: none;
}
.export-link:hover {
    color: #fff;
}
</style>